<template>
  <a-modal v-model:visible="detailVisable" :title="title" title-align="start" ok-text="关闭" :hide-cancel="true" @before-ok="handleCancel" modal-class="formModal" :mask-closable="false" width="40%">
    <a-row style="text-align: left;">
      <a-button v-if="isAddBtn" style=" width: 100px;margin: 0 0 10px 0; background-color: #0077a9;" type="primary" @click="openDetailItem('', 1)"><icon-plus/>新增</a-button>
    </a-row>
    <a-table :data="list" :bordered="false" :pagination="false" class="affect-table">
      <template #columns>
        <a-table-column title="部件" data-index="components"></a-table-column>
        <a-table-column title="指标名称" data-index="metricsName"></a-table-column>
        <a-table-column title="指标类别" data-index="categoriesString" :width="90"></a-table-column>
        <a-table-column title="结果" data-index="resultString" :width="60"></a-table-column>
        <a-table-column title="操作" align="center" v-if="isAddBtn" :width="152">
          <template #cell="{ record }">
              <a-button type="text" status="success" style="color: #409eff;" @click="openDetailItem(record, 2)">编辑</a-button>
              <a-button type="text" status="warning" @click="deleteDetailItem(record)">删除</a-button>
          </template>
      </a-table-column>
      </template>
    </a-table>
  </a-modal>
  <addDetail :systemList="systemList" :getList="getList" ref="DetailItem"></addDetail>
</template>

<script setup>
import { ref, defineProps, defineExpose, toRefs } from 'vue'
import { IconPlus } from '@arco-design/web-vue/es/icon'
import { Modal, Message } from '@arco-design/web-vue'
import addDetail from './addDetail.vue'
import { apiFault } from '@/api/fault';
const props = defineProps({
  title: {
    type: String,
    default: '故障影响'
  },
  systemList: {
    type: Array,
    default: () => []
  }
})
const { systemList } = toRefs(props)
const list = ref([])
const detailVisable = ref(false)
const DetailItem = ref(null)
const tabVal = ref('')
const faultId = ref('')
const isAddBtn = ref(true)
const handleCancel = (done) => {
  done(false);
  detailVisable.value = false;
}
const openDetailItem = ( data, type) => {
  DetailItem.value.openAddDetail( data?.id, type, faultId.value, tabVal.value)
}
const deleteDetailItem = (data) => {
  Modal.confirm({
      title: '提示',
      content: '是否删除当前影响？',
      modalClass:"tipModal",
      onOk:(()=>{
        apiFault.deleteInfluence(data.id).then(res => {
          if(+res.code === 200) {
            Message.success('删除成功')
            getList(faultId.value)
          } else {
            Message.error(res.message)
          }
        })
      }),
  })
}
const getList = (id) => {
  apiFault.selectInfluence(id).then(res => {
    if(+res.code === 200) {
      list.value = res?.data || []
      list.value?.forEach(item => {
        if (!item.resultString) item.resultString = `${item.score}`
      })
    }
  })
}
const openDetailVisible = ( addBtn = true,id, tab) => {
  isAddBtn.value = addBtn
  faultId.value = id
  tabVal.value = tab
  getList(id)
  detailVisable.value = true
}
defineExpose({
  openDetailVisible
})
</script>

<style lang="less" scoped>
.affect-table {
  .arco-input-disabled {
    background-color: transparent !important;
  }
}
</style>